<template>
  <div class="ai-dialog-box">
    <div class="send-msg" ref="messageList">
      <div class="msg-list">
        <div v-for="msg in text" :class="['msg-item', msg.role === 'user' ? 'msg-item-user' : '']" :key="msg.content">
          <div class="msg-icon">
            <a-avatar size="large" :style="{
          backgroundColor: msg.role === 'user' ? '#f56a00' : '#7265e6',
          verticalAlign: 'middle',
        }">
              {{ msg.role === "user" ? "U" : "R" }}
            </a-avatar>
          </div>
          <div class="msg-text">
            <MackdownEditor v-if="isMd(msg.content)" :value="msg.content" :preview="true" :toolbars="[]" :footers="[]">
            </MackdownEditor>
            <p v-else>{{ msg.content }}</p>
            <!-- <p>{{ msg.content }}</p> -->

          </div>
        </div>
        <div :class="['msg-item']" v-if="status === 'ttsing'">
          <div class="msg-icon"></div>
          <div class="msg-text">
            {{ result }}
          </div>
        </div>
      </div>
    </div>
    <div class="send-Box">
      <a-input v-model:value="msg"></a-input>
      <a-button @click="sendMsg" :disabled="status === 'ttsing'">发送</a-button>
    </div>
  </div>

</template>
<script setup>
import bigModel from "@/utils/ai";
import MackdownEditor from '@/components/MackdownEditor'
import { ref, watch, nextTick, onUpdated } from "vue";
const status = ref("init");
const msg = ref("");
const result = ref("");
const messageList = ref()
const bigModelClass = new bigModel({
  // 结果回调
  resultCallback: (res) => {
    formResult(res);
  },
  // 状态回调
  statusCallback: (action) => {
    // formatAction(action);
    status.value = action;
  },
});

// 上下文数据
const text = ref([
  {
    role: "assistant",
    content: "我是火星大模型，很高兴为你服务～",
  },
]);


const isMd = (str) => {
  return str.includes('```')
}


// 定义将滚动条定位在底部的方法
const scrollToBottom = () => {
  nextTick(() => {
    let chat = messageList.value
    chat.scrollTop = chat.scrollHeight
  })
}
const sendMsg = () => {
  // 只有状态为init、endPlay、errorTTS时才可以发送消息
  if (["init", "endPlay", "errorTTS"].indexOf(bigModelClass.status) > -1) {
    text.value.push({
      role: "user",
      content: msg.value,
    });
    bigModelClass.start(text.value);

    console.log(messageList.value.scrollTop, messageList.value.scrollHeight)
  }
};

// 文本拼接
const formatText = (list) => {
  return list.map((item) => item.content).join("");
};

const formResult = ({ header, payload }) => {

  result.value += formatText(payload.choices.text);
  // 处理对话

  if (header.code === 0 && header.status === 2) {
    // 说明话说完了
    console.log("对话结束");
    text.value.push({
      role: "assistant",
      content: result.value,
    });
    msg.value = "";
    result.value = "";

  }
};


onUpdated(() => {
  scrollToBottom()
})



</script>
<style lang='scss' scoped>
.ai-dialog-box {
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;

  .send-Box {
    display: flex;
    width: 100%;
  }

  .send-msg {
    flex: 1;
    overflow: auto;

    .msg-item {
      padding: 12px;
      display: flex;

      .msg-text {
        word-break: break-all;
        line-height: 40px;
        width: 70%;
        text-align: left;
      }

      .msg-icon {
        width: 40px;
        height: 40px;
        min-width: 32px;
        margin-right: 16px;
      }
    }

    .msg-item-user {
      align-self: flex-end;
      flex-direction: row-reverse;
      // margin-right: 0;
      margin-left: 0;

      .msg-icon {
        margin-right: 0;
        margin-left: 16px;
      }

      .msg-text {
        text-align: right;
      }
    }
  }
}
</style>